<template>
  <div>
    <div id="map"  ref="myEchart">
    </div>
    <div id="form" v-if="flag == true">
      <el-descriptions class="margin-top" :title="getTitle" :column="1" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <img src="../../assets/image/green_marker.png" width="15%" />
           进行中的项目
          </template>
          <a href="/gismap" target="_blank" class="p_font">{{obj.jxz}} 个</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <img src="../../assets/image/red_marker.png" width="15%" />
            建设异常的项目
          </template>
          <a href="/gismap" target="_blank" class="p_font">{{obj.yc}} 个</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <img src="../../assets/image/bue_marker.png" width="15%" />
           年度已完成的项目
          </template>
          <a href="/gismap" target="_blank" class="p_font">{{obj.ywc}} 个</a>
        </el-descriptions-item>
      </el-descriptions>
      <img src="../../assets/icons/guanbi.png" height="7%" @click="setFlag" />
    </div>

  </div>
</template>
<script>
  import { getToken } from '@/utils/auth'
  import Vue from 'vue';
  import * as echarts from 'echarts';
  const xiangyangJson = require("../../../public/echartsData/420600.json")
  export default {
    name: 'colorMap',
    data() {
      return {
        myChart: "",
        chart: null,
        flag: false,
        area: "",
        obj: {
          ywc: "",
          yc: "",
          jxz: ""
        }
      }
    },
    mounted() {
      this.init();
    },

    methods: {
      gtRouter() {
        this.$router.push({
          path: '/gismap'
        })
      },
      init() {
        var obj = ""
        var that = this
        let myChart = echarts.init(document.getElementById('map'));
        echarts.registerMap('xiangyang', xiangyangJson);
        let option = {
          // title: {
          //   text: '地图',
          //   left: 'center'
          // },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (!params.value) {
                return '该地区暂无项目';
              }
              return params.name + '：' + params.value
            },
            confine: true
          },
          visualMap: {
            min: 0,
            max: 100,
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            itemWidth: 10,
            itemHeight: 70,
            inRange: {
              color: ['#e6f7ff', '#1890FF', '#0050b3'],
            }
          },
          geo: [{
            map: 'xiangyang',
            roam: false, //roam与上一个geo配置相同
            zoom: 1.1,
            itemStyle: { //底层地图样式
              normal: {
                //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
                borderColor: '#0A609D',
                borderWidth: 2,
                color: '#FFFFFF'
              },
              emphasis: {
                color: '#E6E6FA'
              }
            }
          }],
          series: [{
            name: '',
            type: 'map',
            label: {
              show: false
            },
            mapType: 'xiangyang', // 自定义扩展图表类型

            itemStyle: {
              // normal: {label: {show: true}},
              emphasis: {
                areaColor: '#ccffff',
                label: {
                  show: true,
                  textStyle: {
                    color: '#000000'
                  }
                }
              },
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 18,
                    fontWeight: 700
                  },
                },
              }
            },
            data: [{
                name: "老河口市", //城市名称
                value: 100, //项目数量
                show: false, //窗口标识
                ywc: 40, //已完成
                yc: 20, //异常
                jxz: 40 //进行中
              },
              {
                name: "襄州区",
                value: 50,
                show: false,
                ywc: 30,
                yc: 10,
                jxz: 10
              },
              {
                name: "枣阳市",
                value: 20,
                show: false,
                ywc: 5,
                yc: 5,
                jxz: 10
              },
              {
                name: "樊城区",
                value: 30,
                show: false,
                ywc: 15,
                yc: 5,
                jxz: 10
              },
              {
                name: "襄城区",
                value: 60,
                show: false,
                ywc: 40,
                yc: 10,
                jxz: 10
              },
              {
                name: "谷城县",
                value: 25,
                show: false,
                ywc: 15,
                yc: 5,
                jxz: 5
              },
              {
                name: "保康县",
                value: 50,
                show: false,
                ywc: 30,
                yc: 10,
                jxz: 10
              },
              {
                name: "南漳县",
                value: 70,
                show: false,
                ywc: 50,
                yc: 10,
                jxz: 10
              },
              {
                name: "宜城市",
                value: 80,
                show: false,
                ywc: 50,
                yc: 20,
                jxz: 10
              }
            ],
          }],
        };
        myChart.setOption(option);
        window.onresize = myChart.resize;
        //点击
        myChart.on('click', function (params) {
          obj = params.data
          that.setData(obj)
        })

      },
      setData(obj) {
        var name = obj.name
        if (name != "") {
          this.area = name
          if (getToken()) {
            this.flag = true;
          } else {
            this.$confirm('请先登录系统', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$router.push('/login')
            })

          }


        } else {
          this.flag = false
        }
        this.obj.ywc = obj.ywc
        this.obj.yc = obj.yc
        this.obj.jxz = obj.jxz
      },
      setFlag() {
        this.flag = false
      }

    },
    computed: {
      getTitle() {
        return this.area + "项目总览"
      }
    }
  }

</script>

<style lang="scss" scoped>
  #map {
    // position: absolute;
    margin-top: -30px;
    width: 100%;
    height: 90vh;
  }

  .p_font:hover {
    color: cornflowerblue;
  }

  #form {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 22%;
    height: 35%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    margin: auto;
    background-color: white;
    padding: 20px;
    padding-left: 30px;
  }

</style>
